<template>
	<view class="">
		<view class="gui-h4 gui-bg-green1 gui-color-white" style="text-align: center; height:88rpx;line-height:88rpx;">
			区域挑战
		</view>
		<view class="" style="background-color: #9cd494;">
			<view class="card-warp gui-padding " v-for="(a,ind) in areas" :key="ind" @tap="linkTo(a)">
				<view class="hulu-card" hover-class="gui-tap">
					<button data-label="Register" class="rainbow-hover">
						<view class="sp">{{a.name}}代表团</view>
					</button>
				</view>
			</view>
		</view>
		<view style="height:88rpx;background-color: #9cd494;">

		</view>
	</view>
</template>

<script>
	import request from '@/api/request.js'
	import {
		onHide
	} from '@dcloudio/uni-app'
	export default {
		data() {
			return {
				areas: [],
				audio: null
			};
		},
		onShow() {
			this.getAreas()
			if (this.audio) {
				console.log("onshow 存在")
				this.audio.play()
			} else {
				console.log("onshow 不存在，创建")
				this.audio = uni.$hl.createHlAudio('hall', true, false)
				this.audio.play()
			}
		},
		onLoad() {},
		onUnload() {
			if (this.audio) {
				this.audio.stop()
			}
		},
		methods: {
			async getAreas() {
				const {
					data
				} = await request.get("area")
				this.areas = data
			},
			linkTo(item) {
				uni.navigateTo({
					url: `/subpages/game/room?id=${item.ID}`,
					success: () => {
						this.audio.stop()
					}
				})
			},
		}
	};
</script>

<style lang="scss">
	.swiper {
		height: 720rpx;
	}

	.grid-text {
		font-size: 14px;
		color: #909399;
		padding: 10rpx 0 20rpx 0rpx;
		/* #ifndef APP-PLUS */
		box-sizing: border-box;
		/* #endif */
	}

	.card-warp {
		.hulu-card {
			.rainbow-hover {
				margin-top: 30rpx;
				font-size: 48rpx;
				font-weight: 700;
				line-height: 200rpx;
				height: 200rpx;
				color: #ff7576;
				background-color: #996923;
				border: none;
				outline: none;
				cursor: pointer;
				position: relative;
				border-radius: 9px;
				box-shadow: 0px 1px 2px #2B3044,
					0px 4px 16px #2B3044;
				transform-style: preserve-3d;
				transform: scale(var(--s, 1)) perspective(600px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
				perspective: 600px;
				transition: transform 0.1s;

				.sp {
					width: 100%;
					background: linear-gradient(90deg,
							#866ee7,
							#ea60da,
							#ed8f57,
							#fbd41d,
							#2cca91);
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
					background-clip: text;
					text-fill-color: transparent;
					display: block;
				}
			}



			.rainbow-hover:active {
				transition: 0.3s;
				transform: scale(0.93);
			}
		}

	}
</style>